<!-- 我的收货地址  -->
<template>
    <page-view>
        <el-card shadow="never">
        <template #header>
            <div class="flex flex-row justify-between">
                <span>我的收货地址</span>
                <span class="text-primary cursor-pointer text-[14px] hover:underline text-[#ff0000]"
                    @click="isShowAddAddressDialog = true">新增地址</span>
            </div>
        </template>
        <el-table :data="tableData.listData" stripe border style="width: 100%" v-loading="isLoading" row-key="id" 
            max-height="550px">
            <el-table-column label="收件人姓名" prop="address_name" width="120" align="center"></el-table-column>
            <el-table-column label="收件人电话" width="120" align="center">
                <template #default="{ row }">
                    {{ maskTel(row.address_tel) }}
                </template>
            </el-table-column>
            <el-table-column label="收货地址" min-width="230">
                <template #default="{ row }">
                    <span class="text-[12px]">
                        {{
                                `${row.province} ${row.city} ${row.city} ${row.address_detail}`
                        }}</span>
                </template>
            </el-table-column>
            <el-table-column label="地址标签" width="120" align="center">
                <template #default="{ row }">
                    <el-tag v-if="row.address_tag">{{ row.address_tag }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="80" align="center">
                <template #default="{ row }">
                    <el-popconfirm title="确定要删除吗" @confirm="handleDelete(row)">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div class="mt-2 flex flex-row justify-between items-end text-gray-600 text-[14px]">
            <p>当前共第{{ queryFormData.pageIndex }}页，共{{ tableData.pageCount }}页，共{{ tableData.totalCount }}条</p>
            <el-pagination background layout="prev, pager, next" :current-page="queryFormData.pageIndex"
                @current-change="pageChange" :total="tableData.totalCount"></el-pagination>
        </div>
        <el-dialog :destroy-on-close="true" :close-on-click-modal="false" :close-on-press-escape="false"
            v-model="isShowAddAddressDialog">
            <AddAddress @closeDialog="isShowAddAddressDialog = false" />
        </el-dialog>
        </el-card>
    </page-view>


</template>
  
<script setup>
import { ref, reactive, watch } from "vue";
import API from "../../utils/API";
import { ElMessage } from "element-plus";
import { maskTel } from "../../utils/StringUtils";
import AddAddress from "../OrderInfo/addAddress"

const queryFormData = reactive({
    pageIndex: 1,
});
const tableData = reactive({
    listData: [],
    pageStart: 1,
    pageEnd: 1,
    totalCount: 0,
    pageCount: 0,
});
const isLoading = ref(false);

const queryData = () => {
    isLoading.value = true;
    API.addressInfo.getMyAddressInfoList(queryFormData.pageIndex)
        .then(result => {
            tableData.listData = result.listData;
            tableData.pageStart = result.pageStart;
            tableData.pageEnd = result.pageEnd;
            tableData.totalCount = result.totalCount;
            tableData.pageCount = result.pageCount;
        })
        .finally(() => {
            isLoading.value = false;
        });
}

queryData();


/**
 * 页码切换的事件
 * @param page
 */
const pageChange = page => {
    queryFormData.pageIndex = page;
    queryData();
}

/**
 * 删除某一项地址的事件
 */
const handleDelete = row => {
    API.addressInfo.deleteById(row.id)
        .then(result => {
            ElMessage.success("删除成功");
            queryData();
        })
}

/**
 * 是否显示新增地址的Dialog
 */
const isShowAddAddressDialog = ref(false);

watch(isShowAddAddressDialog, (newValue, oldValue) => {
    if (newValue === false) {
        queryData();
    }
})

</script>
  
<style scoped lang="scss">

</style>